<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>数组求和</title>
	<style>
        #box{
        	width: 300px;
        	margin: 0 auto;
        	background-color: pink;
        }
		p{ height: 30px;
		color:red;
		font-size: 20px;
		 }
	</style>
</head>
<body>
    <div id="box"> 
		<input type="text" value="1,2,3,4,5,6,7,8,9" />
		<br/>
		<input type="button" value="Add"/>
		<p></p>
    </div>
</body>
</html>
<script>
	window.onload = function(){
		var Ut = document.getElementsByTagName("input");
		
		//alert(strAttr)
		//alert(totalNum)
		// var Op = document.getElementsByTagName("p");
		// 注意下面3个 var 的位置 必须放在函数里面 
		Ut[1].onclick = function(){
			var strAttr = Ut[0].value.split(",");
		    var Op = document.getElementsByTagName("p");
			var totalNum = 0;
			for (var i = 0; i < strAttr.length; i++) {
			    totalNum += parseInt(strAttr[i]);
		        console.log(strAttr[i])
			} 
			Op[0].innerHTML = totalNum
		}
	}
	
</script>